<template>
	<view>
		<u-navbar :is-back="false" title="个人中心" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main">
			<scroll-view scroll-y>
				<!-- 信息 -->
				<view class="info">
					<view class="info-content" v-if="!loginState">
						<view class="info-left">
							<view class="img"><u-image width="120" shape="circle" height="120" error-icon=""></u-image></view>
							<u-button :hair-line="false" :custom-style="customStyle" :ripple="true" open-type="getUserInfo" @click="handleToLogin">您还未登录</u-button>
						</view>
					</view>
					<view class="info-content" v-else @tap="handleNavigateTo('./info/info')">
						<view class="info-left">
							<view class="img" v-if="userInfo"><u-image width="120" shape="circle" height="120" :src="avatar" error-icon=""></u-image></view>
							<text v-if="userInfo">{{ userInfo.username }}</text>
						</view>
						<u-icon name="arrow-right" size="35"></u-icon>
					</view>
				</view>
				<!-- 商品订单 -->
				<view class="order">
					<view class="order-top">
						<text class="label">商品订单</text>
						<text class="more" @tap="handleNavigateTo('./order/order', 1)">查看全部订单</text>
					</view>
					<view class="order-grid">
						<view class="order-item" @tap="handleNavigateTo('./order/order', 2)">
							<u-image width="65" height="65" :src="require('../../static/image/weifukuan.png')"></u-image>
							<text>未付款</text>
						</view>
						<view class="order-item" @tap="handleNavigateTo('./order/order', 3)">
							<u-image width="65" height="65" :src="require('../../static/image/daixiaofei.png')"></u-image>
							<text>待消费</text>
						</view>
						<view class="order-item" @tap="handleNavigateTo('./order/order', 5)">
							<u-image width="65" height="65" :src="require('../../static/image/yiwancheng.png')"></u-image>
							<text>已完成</text>
						</view>
						<view class="order-item" @tap="handleNavigateTo('./order/order', 4)">
							<u-image width="65" height="65" :src="require('../../static/image/daipingjia.png')"></u-image>
							<text>待评价</text>
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="list">
					<u-cell-item title="收货地址管理" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./shippingAddress/shippingAddress')"></u-cell-item>
					<u-cell-item title="我的钱包" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./wallet/wallet')"></u-cell-item>
					<u-cell-item title="浏览记录" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./browseRecords/browseRecords')"></u-cell-item>
					<u-cell-item title="联系客服" class="list-item" hover-class="cell-hover-class" @click="showPopup = true"></u-cell-item>
					<u-cell-item title="产品反馈" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./feedback/feedback')"></u-cell-item>
					<u-cell-item title="用户协议" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./userAgreement/userAgreement')"></u-cell-item>
					<u-cell-item title="隐私政策" class="list-item" hover-class="cell-hover-class" @click="handleNavigateTo('./privacyPolicy/privacyPolicy')"></u-cell-item>
				</view>
			</scroll-view>
			<!-- 客服弹窗 -->
			<u-popup v-model="showPopup" mode="center" border-radius="15">
				<view class="popup">
					<text class="popup-title">客服咨询</text>
					<text class="popup-mobile">{{ '咨询热线：' + customer.tel_number }}</text>
					<u-image width="220" height="220" :src="customer.kefu_qr"></u-image>
					<text class="popup-sub">长按试别二维码保存图片</text>
				</view>
			</u-popup>
			<!-- 授权获取手机号 -->
		</view>
	</view>
</template>

<script>
// #ifdef H5
import { getUrlParams } from '../../common/common.js';
// #endif
import { devUrl } from '../../common/request.js';
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				backgroundColor: 'rgba(0,0,0,0)',
				color: '#fff',
				border: 'none'
			},
			showPopup: false,
			userInfo: null,
			customer: {},
			phoneData: {},
			loginState: false, // 登录状态
			wx_code: '', // 授权code
			avatar: '' // 头像
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		// 客服信息
		this.$baseRequest('/api/Common/customer').then(res => {
			this.customer = res.data;
		});
		// #ifdef H5
		this.wx_code = getUrlParams('code');
		let loginState = uni.getStorageSync('login_state');
		if (!loginState && this.wx_code) {
			this.$baseRequest(
				'/api/Login/h5Login',
				{
					code: this.wx_code
				},
				'POST'
			).then(res => {
				let token = res.data.token;
				uni.setStorageSync('tk', token);
				uni.setStorageSync('login_state', true);
				this.onPageInit();
			});
		}
		// #endif
	},
	onShow() {
		this.onPageInit();
	},
	methods: {
		onPageInit() {
			let state = uni.getStorageSync('login_state');
			this.loginState = state && state ? true : false;
			if (this.loginState) {
				this.$tkRequest('/api/User/userInfo').then(res => {
					this.userInfo = res.data;
					if (this.$u.test.url(this.userInfo.photo)) {
						this.avatar = this.userInfo.photo;
					} else {
						this.avatar = devUrl + this.userInfo.photo;
					}
				});
			}
		},
		handleNavigateTo(url, index) {
			if (this.loginState) {
				if (index) {
					uni.navigateTo({
						url: `${url}?current=${index}`
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			} else {
				uni.showToast({
					title: '未登录，请您先登录',
					icon: 'none'
				});
			}
		},
		handleToLogin() {
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: './login/login'
			});
			// #endif

			// #ifdef MP-WEIXIN
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(res) {
					let code = res.code;
					uni.getUserInfo({
						success: function(result) {
							let iv = result.iv;
							let encryptedData = result.encryptedData;
							let info = JSON.parse(result.rawData);
							let params = {
								code: code,
								iv: iv,
								encryptedData: encryptedData,
								nickName: info.nickName,
								gender: info.gender,
								avatarUrl: info.avatarUrl
							};
							uni.showLoading({
								title: '登录中...'
							});
							that.$baseRequest('/api/login/wechatLogin', params).then(res => {
								uni.hideLoading();
								let token = res.data.token;
								uni.setStorageSync('tk', token);
								uni.setStorageSync('login_state', true);
								uni.showToast({
									title: '登录成功',
									success: function() {
										that.onPageInit();
									}
								});
							});
						}
					});
				}
			});
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			let isWeixin = ua.indexOf('micromessenger') != -1;
			// 判断是否是微信浏览器
			if (isWeixin) {
				const appId = 'wx58859e594293179b';
				const url = 'http%3a%2f%2fzhibo.aoxiang.com%2f%23%2fpages%2fmine%2fmine';
				location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appId +
					'&redirect_uri=' +
					url +
					'&response_type=code&scope=snsapi_userinfo&connect_redirect=1&state=STATE#wechat_redirect';
			} else {
				uni.showToast({
					title: '请在微信中打开',
					icon: 'none'
				});
			}
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.info {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg 100rpx $uni-spacing-row-lg;
		background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
		color: #f1f1f1;
		font-size: 1rem;
		/* #ifdef APP-PLUS */
		font-size: 14pt;
		/* #endif */

		.info-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.info-left {
			display: flex;
			align-items: center;

			.img {
				border: 5rpx solid #eee;
				border-radius: 50%;
			}

			text {
				padding-left: 30rpx;
			}
		}
	}

	.order {
		background-color: #fff;
		margin: -65rpx $uni-spacing-row-lg 0 $uni-spacing-row-lg;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		border-radius: 12rpx;

		.order-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: $uni-spacing-col-lg;
			border-bottom: 1rpx solid #eee;

			.label {
				font-size: 11pt;
				/* #ifdef APP-PLUS */
				font-size: 13pt;
				/* #endif */
			}

			.more {
				font-size: 10pt;
				color: #808080;
				/* #ifdef APP-PLUS */
				font-size: 12pt;
				/* #endif */
			}
		}

		.order-grid {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: $uni-spacing-col-lg;

			.order-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 10pt;
				/* #ifdef APP-PLUS */
				font-size: 12pt;
				/* #endif */

				text {
					padding-top: $uni-spacing-col-sm;
				}
			}
		}
	}

	.list {
		padding: $uni-spacing-col-lg 7rpx;
		margin-top: $uni-spacing-col-lg;
		background-color: #fff;
	}

	.cell-hover-class {
		color: #007aff;
		opacity: 0.8;
	}

	.popup {
		width: 80vw;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-image: url();
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #f1f1f1;

		.popup-title {
			padding: $uni-spacing-col-lg 0;
			font-family: '微软雅黑';
			letter-spacing: 4rpx;
			font-size: 12pt;
		}

		.popup-mobile {
			padding-bottom: $uni-spacing-col-lg;
			font-size: 11pt;
		}

		.popup-sub {
			padding: $uni-spacing-col-lg;
		}
	}
}
</style>
